<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>仲裁详情</title>
    <!-- 基本框架 -->
    <link rel="stylesheet" href="../../../css/common.css">
    <script src="../../../script/vue.min.js" type="text/javascript"></script>
    <script src="../../../script/frame.js" type="text/javascript"></script>
    <script src="../../../script/baseConfig.js" type="text/javascript"></script>
    <script src="../../../script/utils.js" type="text/javascript"></script>
    <script src="../../../script/common.js" type="text/javascript"></script>
    <style>
		body{background:#F9F9F9;}
        #container{padding:0.75rem 0;padding-bottom:0;}
		.arbUl{padding:0 0.5rem;}
		.arbUl li{margin-bottom:0.75rem;width:100%;overflow:hidden;}
		.arbUl li .head{background:#FFF;float:left;width:0.75rem;height:0.75rem;border-radius:50%;}
		.arbUl li .info{float:left;padding-left:0.33rem;max-width:calc(100% - 0.75rem);}
		.arbUl li .info>h3{font-weight:normal;font-size:0.26rem;line-height:0.4rem;height:0.4rem;color:#8d8d8d;}
		.arbUl li .info>h3 font{font-size:0.26rem;margin-left:0.4rem;color:#9a9a9a;font-weight:normal;position:relative;}
		.arbUl li .info>div{position:relative;color:#333;margin-top:0.21rem;background:#FFF;line-height:0.5rem;font-size:0.29rem;padding:0.2rem 0.3rem;border-radius:0.2rem;padding-bottom:0.1rem;}
		.arbUl li.left .info>div:after{content:" ";position:absolute;left:-12px;top:10px;width:24px;height:40px;background:url("../../../image/my/href.png")no-repeat center center;background-size:100%;}
		.arbUl li .downTime{float:left;width:100%;text-align:center;padding-top:0.2rem;}
		.arbUl li .downTime a{font-size:0.24rem;background:#dadada;margin-top:0.3rem;color:#FFF;line-height:0.35rem;height:0.35rem;padding:0 0.2rem;border-radius:1rem;display: inline-block;}

		.arbUl li .info>div .img{margin-top:0.2rem;display: flex;flex-wrap: wrap;justify-content: flex-start;}
		.arbUl li .info>div .img img{width:calc((100vw - 1rem - 0.75rem - 0.33rem - 0.6rem - 0.6rem) / 4);height:calc((100vw - 1rem - 0.75rem - 0.33rem - 0.6rem - 0.6rem) / 4);object-fit: cover;border-radius:0.03rem;margin-bottom:0.2rem;margin-right:0.2rem;}
		.arbUl li .info>div .img img:nth-child(4n){margin-right:0;}
		.arbUl li.right{}
		.arbUl li.right .head{float:right;}
		.arbUl li.right .info{float:right;padding-left:0;padding-right:0.33rem;}
		.arbUl li.right .info>div:after{content:" ";position:absolute;right:-12px;top:10px;width:24px;height:40px;background:url("../../../image/my/myself.png")no-repeat center center;background-size:100%;}

		.arbUl li.right .info>div{background:#1abaff;color:#FFF;}
		.arbUl li.right .info>h3{text-align:right;}
		.arbUl li.right .info>h3 font{margin-left:0;margin-right:0.4rem;}

		.upFixedBottom{position:fixed;bottom:0;left:0;width:100%;height:2.5rem;background: linear-gradient(to bottom,rgba(255,255,255,0) 0%,rgba(255,255,255,0.3) 10%,rgba(255,255,255,0.8) 30%,rgba(255,255,255,0.95) 50%,#ffffff 100%);}
		.upFixedBottom button{background: linear-gradient(to right,#ff2626 0%,#fd6e1f 70%);height:0.9rem;line-height:0.9rem;display:block;margin:0 auto;margin-top:1.2rem;width:92%;text-align:center;color:#FFF;font-size:0.3rem;border-radius:0.07rem;}
    </style>
</head>
<body>
    <div id="app" v-cloak>
		<div id="container" :style="{'margin-bottom':showUploadBtn?'2.5rem':''}" v-if="info != null">
			<ul class="arbUl">
				<li class="clearfix" :class="{left: !isMe(item.type), right: isMe(item.type)}" v-for="(item, index) in info.log">
					<img :src="getUserInfo(item.type).avatar" class="head" />
					<div class="info">
						<h3 class="ell" v-if="isMe(item.type)"><font>{{item.time_created | dateFormate}}</font>{{getUserInfo(item.type).name}}</h3>
						<h3 class="ell" v-else>{{getUserInfo(item.type).name}}<font>{{item.time_created | dateFormate}}</font></h3>
						<div>
							行为：{{item.opration}}<br />
							原因：{{item.remark}}
							<div class="img" v-if="item.mate != ''">
								<img @click="viewMedia(img.url)" :src="getMediaUrl(img.url)" v-for="(img, key) in item.mate" />
							</div>
						</div>
					</div>
					<div class="downTime" v-if="item.is_close == 1 && showCountdown(item)">
						<a v-if="info.arbitration_info.status == 3 || info.arbitration_info.status == 5">派单人复审倒计时：{{publishDiffTime | timeFormate}}</a>
						<a v-if="info.arbitration_info.status == 4 || info.arbitration_info.status == 5">接单人复审倒计时：{{acceptDiffTime | timeFormate}}</a>
					</div>
				</li>
			</ul>
			<div class="upFixedBottom" v-if="showUploadBtn">
				<button @click="$.openUrl('common/commonTitle','my/arbitrationApply',{title:'上传复审', id: id, logId: logId})">上传复审</button>
			</div>
		</div>
        <template v-else>
            <div class="loadFull whiteBg">
                <div class="se-loading"></div>
            </div>
        </template>
    </div>
    <script type="text/javascript">
        apiready = function() {
            var photoBrowser = api.require('photoBrowser');
            var app = new Vue({
                el:'#app',
                data:{
					iosTest:false,
					referer: '',

                    id: 0,
                    logId: 0,
                    info: null,
                    lastLog: null,
                    acceptDiffTime: 0,
                    publishDiffTime: 0,
                    showUploadBtn: false,
                    timer: 0,
				},
				filters: {
                    dateFormate: function(time){
                        return utils.tsToDateFormat(time, 'yyyy-MM-dd hh:mm');
                    },
                    timeFormate: function(diffTime){
                        var closeTimeStr = '';
                        var day = Math.floor(diffTime / 3600 / 24);
                        var hour = Math.floor(diffTime / 3600 % 24);
                        var min = Math.floor(diffTime / 60 % 60);
                        var sec = Math.floor(diffTime % 60);

                        if(diffTime >= 3600*24){
                            closeTimeStr = `${day}天${hour}小时${min}分${sec}秒`;
                        }else if(diffTime >= 3600){
                            closeTimeStr = `${hour}小时${min}分${sec}秒`;
                        }else if(diffTime >= 60){
                            closeTimeStr = `${min}分${sec}秒`;
                        }else if(diffTime > 0){
                            closeTimeStr = `${sec}秒`;
                        }else{
                            closeTimeStr = `已终止`;
                        }

                        return closeTimeStr;
					},
                },
                created: function(){
                    this.id = api.pageParam.data.id;
                    this.referer = api.pageParam.data.referer;
                },
                methods:{
                    goTaskDetail: function(){
                        if(this.info.ispublish == 1){
                            if(this.referer == 'publishDetail'){
                                api.closeWin();
                            }else{
                                $.openUrl('common/commonTitle','task/sendDetail',{title:'派单详情',taskId: this.info.task_info.task_id});
                            }
                        }else{
                            $.openUrl('common/commonTitle','task/detail',{title:'任务详情',taskId: this.info.task_info.task_id});
                        }
                    },
                    getMediaUrl: function(url){
						var exc = url.substr(url.lastIndexOf('.')+1).toLocaleLowerCase();
						if(['jpg','jpeg','gif','png','webp'].indexOf(exc) != -1){
							return url;
						}
						return '../../../image/task/video.png';
					},
                    renderStatusUI: function(status){
                        var report = this.info.ispublish.toString();
                        var gray = 'rgb(160, 162, 160)';
                        var red = 'rgb(245, 13, 13)';
                        var green = '#49B447';
                        var blue = 'rgb(6, 78, 241)';
                        var yellow = 'rgb(245, 120, 13)';
                        var statusInfo = {
                            '0': {text: '待审核', color: gray},
                            '1': {text: report == 1 ? '胜诉' : '败诉', color: report == 1 ? green: red},
                            '2': {text: report == 1 ? '败诉' : '胜诉', color: report == 1 ? red : green},
                            '3': {text: '待复审', color: yellow},
                            '4': {text: '待复审', color: yellow},
                            '5': {text: '待复审', color: yellow},
                            '6': {text: '判平', color: blue},
                            '7': {text: '判平', color: blue},
                        };
                        return statusInfo[status];
                    },
                    getDetail: function(showLoad){
                        var _this = this;
                        $.ajax({
                            url: '/task/arbitration/my_info/detail?id='+this.id,
							method: 'get',
							load: showLoad,
                            success: function(res){
                                _this.info = res.data;
								_this.steps = res.data.task_info.custom_steps;
                                _this.calcDifftime();
                                _this.countDown();
								_this.renderLast();
                                _this.$nextTick(function(){
									var ch = document.body.clientHeight;
									window.scrollTo(0,ch);
                                });
                            },
                        });
                    },
                    renderLast: function(){
                        var ispublish = parseInt(this.info.ispublish);
                        var status = this.info.arbitration_info.status.toString();
                        var gray = 'rgb(160, 162, 160)';
                        var red = 'rgb(245, 13, 13)';
                        var green = '#49B447';
                        var blue = 'rgb(6, 78, 241)';

                        var color = gray;
                        var content = '';
                        switch (status){
                            case '1':
                                content = ispublish ? '我方胜诉' : '我方败诉';
                                color = ispublish ? green : red;
                                break;
                            case '2':
                                content = ispublish ? '我方败诉' : '我方胜诉';
                                color = ispublish ? red : green;
                                break;
                            case '6':
                                content = '双方判平';
                                color = blue;
                                break;
                            case '7':
                                content = '双方判平';
                                color = blue;
                                break;
                        }
                        if(content == ''){
                            this.lastLog = null;
                        }else{
                            this.lastLog = {
                                color: color,
                                text: content
                            };
                        }
                    },
                    showCountdown: function(item){
                        var $footer = document.querySelector('#footer');
                        if(!item.accept_close_time && !item.publish_close_time){
                            return false;
                        }
                        if([3,4,5].indexOf(this.info.arbitration_info.status) == -1){
                            return false;
                        }
                        this.containerPadding = ($footer ? $footer.offsetHeight : 0)  + 'px';
                        this.renderUploadBtn();
                        return true;
                    },
                    calcDifftime: function(){
                        var logs = this.info.log;
                        var lastCountdownLog = null;
                        if(logs.length == 0){
                            this.acceptDiffTime = 0;
                            this.publishDiffTime = 0;
                            return false;
                        }
                        for(var i=0; i<logs.length; i++){
                            if(logs[i].is_close == 1){
                                if(logs[i].accept_close_time > 0 || logs[i].publish_close_time > 0){
                                    lastCountdownLog = logs[i];
                                    this.logId = lastCountdownLog.id;
                                    break;
                                }
                            }
                        }
                        if(lastCountdownLog == null){
                            this.acceptDiffTime = 0;
                            this.publishDiffTime = 0;
                            return false;
                        }
                        this.acceptDiffTime = Math.floor(((lastCountdownLog.time_created + lastCountdownLog.accept_close_time) * 1000 - Date.now()) / 1000);
                        this.publishDiffTime = Math.floor(((lastCountdownLog.time_created + lastCountdownLog.publish_close_time) * 1000 - Date.now()) / 1000);
                    },
                    countDown: function(){
                        var _this = this;
                        this.publishDiffTime -= 1;
                        this.acceptDiffTime -= 1;
                        this.timer = setTimeout(function(){
                            if(_this.publishDiffTime <= 0){
                                _this.publishDiffTime = 0;
                            }
                            if(_this.acceptDiffTime <= 0){
                                _this.acceptDiffTime = 0;
                            }
                            _this.renderUploadBtn();

                            if(_this.publishDiffTime == 0 && _this.acceptDiffTime == 0){
                                _this.timer = clearTimeout(_this.timer);
                                return false;
                            }else{
                                _this.countDown();
                            }

                        }, 1000);
                    },
                    renderUploadBtn: function(){
                        var _this = this;
                        var ispublish = this.info.ispublish;
                        var status = this.info.arbitration_info.status;
                        if([3,4,5].indexOf(status-0) === -1){
                            _this.showUploadBtn = false;
                            return false;
                        }
                        if(ispublish){
                            // 派单人
                            if(status == 3 || status == 5){
                                _this.showUploadBtn = _this.publishDiffTime < 1 ? false : true;
                            }
                        }else{
                            // 接单人
                            if(status == 4 || status == 5){
                                _this.showUploadBtn = _this.acceptDiffTime < 1 ? false : true;
                            }
                        }
                    },
                    viewMedia: function(url){
                        this.viewPicture(url);
                        // var exc = url.substr(url.lastIndexOf('.')+1).toLocaleLowerCase();
                        // if(['jpg','jpeg','png','gif','webp'].indexOf(exc) >= 0){
                        //     this.viewPicture(url);
                        // }else{
                        //     this.viewVideo(url);
                        // }
                    },
                    viewPicture: function(img){
                        photoBrowser.open({
                            images: [img],
                            bgColor: '#000',
                            zoomEnabled: true,
                        }, function(ret, err) {
                            if(ret.eventType == 'click'){
                                photoBrowser.close();
                            }
                        });
                    },

                    copyOperableVal: function(val){
                        clipBoard.set({
                            value: val
                        }, function(ret, err) {
                            if (ret) {
                                $.toast('复制成功');
                            } else {
                                $.toast('复制失败');
                            }
                        });
					},
					isMe: function(type){
						return type == this.info.ispublish;
					},
					getUserInfo: function(type){
						var name = '';
						var avatar = '';
						switch (type){
							case -1:
								name = '平台客服';
								avatar = '../../../image/my/mineIcon7.png';
								break;
							case 0:
								name = '接单人';
								avatar = this.info.arbitration_info.accept_user_avatar;
								break;
							case 1:
								name = '派单人';
								avatar = this.info.arbitration_info.publish_user_avatar;
								break;
						}
						return {
							name: name,
							avatar: avatar
						};
					},

                },
                mounted(){
                    this.getDetail();
                    $.initJs(this);
                }
			});

			api.addEventListener({name: 'updateArbitrationDetail'}, function(ret, err){
				var loadFlush = ret.value.loadFlush;
                app.timer = clearTimeout(app.timer);
                app.getDetail(!!loadFlush);
            });
        }
    </script>
</body>
</html>
